<template>
  <!-- 顶部自定义 -->
  <title-mobile :titleShow="true" :gradient="false">
    <div class="title">{{clas}}</div>
  </title-mobile>
  <!-- -------------------图片集合----------------------------- -->
  <photo-provider @indexChange="indexChange" @visibleChange="visibleChange" class="view">
    <photo-consumer :intro="photo.mainClas" :src="minioUrl+photo.oosKey" v-for="photo in photoList"
      :key="photo" class="view-box" :download-name="minioUrl+photo.oosKey">
      <div class="view-box-info">
        {{photo.mainClas}}
      </div>
      <div class="view-box-item">
        <!-- 选择按钮 -->
        <div :class="className" @click.stop="checkChange($event,photo.id)">
        </div>
        <el-image :src="minioUrl+photo.oosKey" fit="cover" style="width:100%;height:100%" />
      </div>
    </photo-consumer>
  </photo-provider>
  <!-- 单图片更多操作 -->
  <div class="image-info" v-show="infoShow">
    <el-card body-style="padding:10px">
      <el-icon class="edit-icon" :size="20" @click="showPhotoInfo(currentPhoto.id)">
        <MoreFilled />
      </el-icon>
    </el-card>
  </div>
  <!-- 图片详情 -->
  <el-drawer v-model="showPhotoInfoView" title="图片详情" :with-header="false" direction="ttb"
    size="40%">
    <div>所属相册：{{photoInfo.album.name}}
      <el-tag class="ml-2" type="info">
        {{photoInfo.album.permission==0?"私有相册":photoInfo.album.permission==1?"全部可见":"共享相册"}}
      </el-tag>
    </div>
    <div class="row-line"></div>
    <div>
      图片名称：{{photoInfo.photo.oosKey.substring(photoInfo.photo.oosKey.lastIndexOf("/")+1,photoInfo.photo.oosKey.length)}}
    </div>
    <div class="row-line"></div>
    <div>上传时间：{{dateFormatUtil(photoInfo.photo.createTime)}}</div>
    <div class="row-line"></div>
    <div>更新时间：{{dateFormatUtil(photoInfo.album.updateTime)}}</div>
    <div class="row-line"></div>
    <div>大小：{{sizeFormatUtil(photoInfo.photo.size)}}</div>
    <div class="row-line"></div>
    <div>备注：{{photoInfo.photo.remark}}</div>
    <div class="row-line"></div>
    <div class="row-line"></div>
  </el-drawer>
</template>

<script>
import { sizeFormat, dateFormat } from "../../utils/index";
import { minioUrl } from "@/base/index";
export default {
  name: 'GPhotoDetect',
  data () {
    return {
      photoList: [],
      clas: "",
      currentPhoto: {},
      infoShow: false,
      minioUrl: minioUrl,
      showPhotoInfoView: false,
      photoInfo: {},
    }
  },
  mounted () {
    this.clas = this.$route.params.clas;
    this.getPhotoList(this.clas);
  },
  methods: {
    getPhotoList (name) {
      this.$axios.get("/photodetect/photo/" + name).then(res => {
        if (res.flag) {
          this.photoList = res.data;
        }
      })
    },
    //查看图片详情
    showPhotoInfo (id) {
      console.log(id);
      this.showPhotoInfoView = !this.showPhotoInfoView;
      if (this.showPhotoInfoView) {
        this.$axios.get("/photo/info/" + id).then(res => {
          if (res.flag) {
            this.photoInfo = res.data;
          }
        })
      }
    },
    //预览改变触发
    indexChange (e) {
      console.log("Photo=>ChangeImage()", e);
      this.imageIndex = e.index.value;
      //载入当前操作的图片信息
      this.currentPhoto = this.photoList[e.index.value];
    },
    visibleChange (e) {
      this.imageIndex = e.index.value;
      //载入当前操作的图片信息
      this.currentPhoto = this.photoList[e.index.value];
      this.infoShow = !this.infoShow;
    },
    sizeFormatUtil (size) {
      return sizeFormat(size);
    },
    dateFormatUtil (date) {
      return dateFormat(date, 1);
    }
  }
}
</script>

<style scoped>
@media (min-width: 0px) {
  .view-box {
    width: 50%;
    height: 100px;
  }
  .view-box-item {
    height: 100px;
  }
}
@media (min-width: 280px) {
  .view-box {
    width: 25%;
  }
  .view-box-item {
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
  }
}
@media (min-width: 750px) {
  .view-box {
    width: 20%;
  }
  .view-box-item {
    height: 150px;
  }
}
@media (min-width: 1080px) {
  .view-box {
    width: 10%;
  }
  .view-box-item {
    height: 100px;
  }
}
.view-box-item {
  position: relative;
}
.view-box {
  position: relative;
}
.view-box-info {
  position: absolute;
  bottom: 0px;
  height: 15px;
  z-index: 10;
  width: calc(100% - 4px);
  color: white;
  left: 2px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 10px;
}
.title {
  margin-top: 10px;
}
.image-info {
  z-index: 10000;
  position: fixed;
  /* width: 200px; */
  height: 40px;
  /* background-color: blue; */
  bottom: 80px;
  left: calc(50% - 35px);
}
.view-box-item {
  position: relative;
}
.edit-icon {
  margin-left: 13px;
}
.edit-icon:last-child {
  margin-right: 13px;
}
</style>